<template>
	<view class="content-box">
		<view class="content-area"  v-for="(commentItem,index) in commentItems">
			<view class="avatar-content">
				<image :src="commentItem.user_avatar" class="avatar"></image>
				<view class="content-items">
					<view class="user-name">{{commentItem.user_name}}</view>
					<view class="date">{{commentItem.comment_date | dateFormatWithoutYear}}</view>
					<view class="content">{{commentItem.comment_content}}</view>
				</view>
			</view>
			<view class="praise">
				<image src="../../static/images/squareImg/none_praise.png"></image>
				<text>{{commentItem.comment_praise}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "comment",
		props: {
			commentItems: Array
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.content-box {
		width: $unit-box-width;
		.content-area {
			width: $unit-box-width;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			.avatar-content {
				display: flex;

				.avatar {
					width: 80rpx;
					height: 80rpx;
					
					margin-right: 20rpx;
					border-radius: 80rpx;
				}

				.content-items {
					.user-name {
						font-weight: bold;
						color: gray;
						margin-bottom: 10rpx;
					}

					.date {
						font-size: 22rpx;
						color: gray;
						margin-bottom: 10rpx;
					}

					.content {
						font-weight: bold;
					}
				}
				
			}
			.praise{
				display: flex;
				align-items: center;
				image{
					width: 50rpx;
					height: 50rpx;
				}
			}
		}
	}
</style>
